<template>
  <div>
    <div id="map" style="width: 800px; height: 600px"></div>
  </div>
</template>
<script>
import qhJson from "@/assets/青海省.json";
import * as echarts from "echarts";
export default {
  name: "APP",
  data() {
    return {};
  },
  methods: {
    initmap() {
      let myChart = echarts.init(document.getElementById("map"));
      echarts.registerMap("青海", qhJson);
      let option = {
        legend: {
          show: false,
          data: [
            "暴雨",
            "大雾",
            "雷暴大风",
            "霜冻",
            "寒潮",
            "大风",
            "高温",
            "下刀子",
          ],
        },
        geo: [
          {
            // tooltip: { show: false },
            map: "青海",
            aspectScale: 1,
            zoom: 1, //缩放
            layoutCenter: ["50%", "45%"],
            layoutSize: "130%",
            show: true,
            roam: false,
            //regions: customSettings,//设置省市县的样式颜色
            label: {
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#4184e5",
                borderColor: "#69e6f6",
                borderWidth: 1,
                shadowBlur: 0,
                shadowColor: "RGBA(86,174,246)",
                shadowOffsetY: 10,
                shadowOffsetX: 0,
              },
              emphasis: {
                show: false,
                label: {
                  color: "#fff",
                },
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "RGBA(59,165,246)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "RGBA(105,230,246)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
          },
        ],
        tooltip: {}, // 配置提示框，有这个配置项即
        series: [
          {
            selectedMode: false,
            name: "青海",
            type: "map",
            map: "青海", // 自定义扩展图表类型
            aspectScale: 1,
            zoom: 1, //缩放
            layoutCenter: ["50%", "45%"],
            layoutSize: "130%",
            showLegendSymbol: false,
            label: {
              show: true,
              color: "#fff",
            },
            itemStyle: {
              normal: {
                areaColor: "pink",
                borderColor: "#69e6h7",
                borderWidth: 1,
                // shadowBlur :0,
                // shadowColor:'RGBA(37,108,190,1)',
                // shadowOffsetY:10,
                // shadowOffsetX:0
              },
              emphasis: {
                show: false,
                label: {
                  color: "#fff",
                },
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "RGBA(37,108,190,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "RGBA(15,169,195,1)", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
            data: [
              { name: "海西蒙古族藏族自治州", value: 12001 },
              { name: "西宁市", value: 1581 },
              { name: "玉树藏族自治州", value: 456 },
              { name: "海北藏族自治州", value: 12001 },
              { name: "海东市", value: 102569 },
              { name: "果洛藏族自治州", value: 5415 },
              { name: "黄南藏族自治州", value: 98984 },
              { name: "海南藏族自治州", value: 5645 },
            ],

            markPoint: {
              symbol: "none",
            },
            // data: data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  created() {
    // this.initmap();
  },
  mounted() {
    this.initmap();
  },
};
</script>
<style lang="scss" scoped>
#map {
  margin: auto;
}
</style>
